<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" contect="http://www.webqin.net">
    <title>忘记密码</title>
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link type="text/css" href="${pageContext.request.contextPath}/css/css.css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3-min.js"></script>
    <script type="text/javascript">
        //导航定位
        $(function(){
            // $(".nav li:eq(2) a:first").addClass("navCur")
            //验证手机 邮箱
            $(".selyz").change(function(){
                var selval=$(this).find("option:selected").val();
                if(selval=="0"){
                    $(".sel-yzsj").show()
                    $(".sel-yzyx").hide()
                }
                else if(selval=="1"){
                    $(".sel-yzsj").hide()
                    $(".sel-yzyx").show()
                }
            })
        })
    </script>
</head>

<body>

<div class="content">
    <div class="web-width">
        <div class="for-liucheng">
            <div class="liulist for-cur"></div>
            <div class="liulist for-cur"></div>
            <div class="liulist"></div>
            <div class="liulist"></div>
            <div class="liutextbox">
                <div class="liutext for-cur"><em>1</em><br /><strong>填写账户名</strong></div>
                <div class="liutext for-cur"><em>2</em><br /><strong>发送验证码</strong></div>
                <div class="liutext"><em>3</em><br /><strong>身份验证</strong></div>
                <div class="liutext"><em>4</em><br /><strong>修改密码</strong></div>
            </div>
        </div><!--for-liucheng/-->
        <form  class="forget-pwd" action="${pageContext.request.contextPath}/login/setPhone" method="post">
            <dl>
                <dt>验证方式：</dt>
                <dd>
                    <select class="selyz">
                        <option value="0">短信验证</option>

                    </select>
                </dd>
                <div class="clears"></div>
            </dl>

            <dl class="sel-yzsj">
                <dt>验证手机号：</dt>
                <dd><input type="text" value="${phoneNumber}" readonly  /></dd>
                <input type="text" name="phone"  value="${phone}" style="display:none" />
                <div class="clears"></div>
            </dl>
            <div class="subtijiao"><input type="submit" value="获取验证码" /></div>
        </form><!--forget-pwd/-->
    </div><!--web-width/-->
</div><!--content/-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js">
    $(function  () {
        //获取短信验证码
        var validCode=true;
        $(".msgs").click (function  () {
            var time=60;
            var code=$(this);
            if (validCode) {
                debugger;
                validCode=false;
                code.addClass("msgs1");
                var t=setInterval(function  () {
                    time--;
                    code.html(time+"秒");
                    if (time==0) {
                        clearInterval(t);
                        code.html("重新获取");
                        validCode=true;
                        code.removeClass("msgs1");

                    }
                },1000)
            }
        }),
            $("#mess").click(function () {
                var phone=$("p").html();

                $.ajax({
                    url: "/Campus_Life_war/login/setPhone",
                    data: {"phone":phone},
                    type: "POST",
                    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                    dataType: "json",
                    async:false,
                    success: function(data) {

                        alert(data)
                    },
                    error:function (data) {
                        console.log(data);
                        debugger;
                    }
                });


            })

    })
</script>

<style type="text/css">
    form{margin:200px auto;width:500px;}
    label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}
    input{width:212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}
    .msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;}
    form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}
</style>


</body>
</html>
